<template>
	<view class="bot-transtion-container">
		<tn-nav-bar fixed alpha customBack>
		  <view slot="back" class='tn-custom-nav-bar__back'
		    @click="goBack">
		    <text class='icon tn-icon-left'></text>
		  </view>
		</tn-nav-bar>
		<view class="bot-bg-image">
			<image class="tn-width-full tn-height-full" :src="bot.bg_image"></image>
		</view>
		<view class="content">
			<view class="header">
				<view class="title tn-text-bold tn-text-xl tn-margin-bottom-xs">{{bot.name || ''}}</view>
				<view class="sub-title">{{bot.subname || ''}}</view>
			</view>
		</view>
		<view class="jump-btn tn-flex tn-flex-row-between tn-width-full">
			<view class="user-num tn-flex tn-flex-col-center">
				<view class="user-avatar tn-flex">
					<view v-for="(item, index) in avatars" :key="index" class="avatar" :style="{left: ('-'+ 20*index+'rpx')}">
						<image class="tn-width-full tn-height-full" :src="item.url"></image>
					</view>
				</view>
				<view class="num tn-text-bold tn-text-md">
					<text>100+</text>人测试过
				</view>
			</view>
			<view class="btn tn-flex-col-center tn-padding-left tn-padding-right" @click="jumpAppManager">
				<view class="tn-text-center">
					<text class="tn-icon-send-fill" style="color: #07C160;font-size: 54rpx;"></text>
				</view>
				免费生成
			</view>
		</view>
		<!-- 头像昵称补充 -->
		<wx-user-info-modal
			v-model="showAuthorizationModal"
			@updated="updatedUserInfoEvent"
			@close="closeModelEvent"
		></wx-user-info-modal>
	</view>
</template>

<script>
	import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
	import { getBotDetail } from '@/api/bot.js'
	import { wxLoginManager } from '@/api/login.js'
	import { userInfoUpdate } from '@/api/user.js'
	export default {
		components: {
			WxUserInfoModal
		},
		data() {
			return {
				bot: {},
				showAuthorizationModal: false,
				userProfile: {},
				avatars: [
					{
						url: 'http://qiniu.yuanlj.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241120133915.jpg'
					},
					{
						url: 'http://qiniu.yuanlj.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241120133951.jpg'
					},
					{
						url: 'http://qiniu.yuanlj.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241120134000.jpg'
					},
					{
						url: 'http://qiniu.yuanlj.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241120134008.jpg'
					},
					{
						url: 'http://qiniu.yuanlj.top/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241120134015.jpg'
					}
				]
			}
		},
		onLoad(params) {
			console.log('params.id', params.id)
			params.id && this.getBotDetailIntarface(params.id)
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 微信登录
			wxLoginManagerInterface() {
				return new Promise((resolve,reject) => {
					wxLoginManager().then(res => {
						if(res && res.success) {
							resolve(res.data)
						} else {
							reject()
						}
					})
				})
			},
			// 跳转相应应用
			async jumpAppManager() {
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
					success: (res) => {
						console.log(res.userInfo)
						this.userProfile = {
							avatar: res.userInfo.avatarUrl,
							nickname: res.userInfo.nickName
						}
					}
				});
				let login = await this.wxLoginManagerInterface()
				
				// 标识新用户
				if(login.status === 0) {
					this.showAuthorizationModal = true
				} else {
					this.handleJump()
				}
			},
			handleJump() {
				let path = this.bot.path
				let params = []
				if(this.bot.bot_id) {
					params.push(`botId=${this.bot.bot_id}`)
				}
				if(this.bot.workflow_id) {
					params.push(`workflow_id=${this.bot.workflow_id}`)
				}
				if (params.length) {
					params.forEach((param, index) => {
						if(index === 0) {
							path += ('?' + param)
						} else {
							path += ('&' + param)
						}
					})
				}
				uni.navigateTo({
					url: path,
				});
			},
			// 关闭信息补全弹框
			closeModelEvent() {
				// 如果关闭不输入就自动获取带入
				this.showAuthorizationModal = false
				this.userInfoUpdateInterface(this.userProfile)
			},
			// 用户头像昵称回填
			updatedUserInfoEvent(info) {
				this.showAuthorizationModal = false
				console.log('info', info)
				this.userInfoUpdateInterface(info)
				this.handleJump()
			},
			// 更新数据库用户头像和昵称
			userInfoUpdateInterface(info) {
				const params = {
					...info,
					openid: uni.getStorageSync('openid')
				}
				userInfoUpdate(params).then(res => {
					
				})
			},
			getBotDetailIntarface(id) {
				let params = {
					id
				}
				getBotDetail(params).then(res => {
					if(res && res.success) {
						this.bot = res.data || {}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';
	.bot-transtion-container {
		background-color: #f4f4f4;
		width: 100vw;
		min-height: 100vh;
		.bot-bg-image {
			width: 100vw;
			height: 600rpx;
		}
		.content {
			.header {
				min-height: 200rpx;
				margin: auto 40rpx;
				padding: 30rpx 40rpx;
				border-radius: 18rpx;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				background-color: #fff;
				position: relative;
				top: -80rpx;
			}
		}
		.jump-btn {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 40rpx 30rpx 20rpx 30rpx;
			padding-bottom: env(safe-area-inset-bottom);
		}
		.user-num {
			.user-avatar {
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border: 2rpx solid #ddd;
					border-radius: 50%;
					overflow: hidden;
					position: relative;
				}
			}
			.num {
				position: relative;
				left: -60rpx;
			}
		}
		.btn {
			
		}
	}
	
</style>